<template>
  <f7-page class="bg-color-white">
    <f7-navbar :title="$t('m.gl1')" back-link=" "></f7-navbar>
    <van-grid :column-num="3" class="game-list" clickable :border="false">
      <van-grid-item
        v-for="(item, index) in gameList"
        :key="index"
        :icon="item.icon"
        :text="item.name"
      />
    </van-grid>
    <van-grid :column-num="3" :border="false" clickable class="game-list">
      <van-grid-item
        v-for="(item, index) in menuList"
        :key="index"
        :icon="item.icon"
        :text="item.name"
        @click="gameRouter(item.url)"
      />
    </van-grid>

    <f7-row class="game-row" no-gap>
      <f7-col>
        <p>0.0000</p>
        <h3>USDT</h3>
      </f7-col>
      <f7-col>
        <p>0.0000</p>
        <h3>BCAB</h3>
      </f7-col>
    </f7-row>
  </f7-page>
</template>

<script>
  export default {
    name: "game-list",
    data() {
      return {
        gameList: [
          {
            name: this.$t('m.gl2'),
            icon: require('../static/imgOne.png')
          },
          {
            name: this.$t('m.gl3'),
            icon: require('../static/imgTwo.png')
          },
          {
            name: this.$t('m.gl4'),
            icon: require('../static/imgThree.png')
          },
          {
            name: this.$t('m.gl5'),
            icon: require('../static/imgFour.png')
          },
          {
            name: this.$t('m.gl6'),
            icon: require('../static/imgFive.png')
          },
          {
            name: this.$t('m.gl7'),
            icon: require('../static/imgSix.png')
          },
          {
            name: this.$t('m.gl8'),
            icon: require('../static/imgSeven.png')
          },
          {
            name: this.$t('m.gl9'),
            icon: require('../static/imgEight.png')
          }
        ],
        menuList: [
          {
            name: this.$t('m.gl10'),
            icon: require('../static/gameCoinIn.png'),
            url: '/game-deposit/?type=1'
          },
          {
            name: this.$t('m.gl11'),
            icon: require('../static/gameCoinOut.png'),
            url: '/game-deposit/?type=2'
          },
          {
            name: this.$t('m.gl12'),
            icon: require('../static/gameList.png'),
            url: '/list-of-fund-changes/'
          }
        ]
      }
    },
    methods: {
      gameRouter(url) {
        if (url) this.$f7router.navigate(url);
      }
    }
  }
</script>

<style scoped lang="scss">
  .game-list {
    /deep/ {
      .van-icon__image {
        width: 150px;
        height: 150px;
      }
      .van-grid-item__text {
        font-size: 30px;
      }

    }
  }

</style>
